<template>
  <div style="padding: 20px;" class="Banner管理">
    <el-button type="success" class="el-icon-plus"> 添加管理员</el-button>
    <div style="overflow-y: auto;">
      <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
        @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55">
        </el-table-column>
        <el-table-column prop="id" label="编号/类型">
        </el-table-column>
        <el-table-column prop="businessId" label="业务编号/链接地址">
        </el-table-column>
        <el-table-column prop="title" label="名称">
        </el-table-column>
        <el-table-column prop="picUrl" label="图标">
          <template slot-scope="scope">
            <img :src="scope.row.picUrl" alt="" width="70">
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态" align="center">
          <template slot-scope="scope">
            <el-button v-if="scope.status" type="warning" round size="small">
              {{ scope.status | fmtstatus }}</el-button>
            <el-button v-else type="success" plain size="small">
              {{ scope.status | fmtstatus }}</el-button>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template slot-scope="scope">{{ scope.row.date }}
            <span style="color: #409eff;margin-right: 5px;" @click="bianji(scope.row)">编辑</span>
            <span style="color: #ff0000;" @click="deleteAll(scope.row)">删除</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-button type="danger" @click="deleteAll">批量删除</el-button>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[10, 20, 30, 40]"
      :page-size="params.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
  </div>
</template>
<script>
import { tableList } from "@/api/bannerManage";
export default {
  data() {
    return {
      params: { page: 1, pageSize: 10 },
      currentPage:1,
      total:10,
      tableData: [
        {
          date: '2016-05-07',
          name: '王小虎',
          address: '上海市普陀区金沙江路 1518 弄'
        }],
      delete: []
    }
  },
  async mounted() {
    this.getList()
  },
  methods: {
    async getList() {
    let { data: res } = await tableList(this.params)
    // console.log(res);
    this.total=res.totalRow
    this.tableData = res.result
  },
    handleSelectionChange(val) {
      this.delete = val
    },
    deleteAll() {
      this.$confirm('删除无法恢复, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(this.delete);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    disable(row){
       this.$confirm('确定要禁用吗?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        console.log(row);
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消禁用'
        });
      });
    },
    handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
        this.params.pageSize=val
        this.getList()
      },
      handleCurrentChange(val) {
        console.log(`当前页: ${val}`);
        this.params.page=val
        this.getList()
      }
  },
  filters: {
    fmtstatus(val) {
      if (val===1) return '禁用'
      else return "启用"
    }
  },
}
</script>
